// 商品信息录入/修改——路由页面
import React, { Component } from 'react'
import './InfoEbtry.scss'
// 图标
import {RocketIcon} from '@primer/octicons-react';
export default class InfoEbtry extends Component {
    constructor(props){
        super(props)
        this.state={
          goodsInfos:false,
        }
      }
      componentDidMount(){
  // 判断是否是通过点击“修改”进入该页面的
        if (this.props.location.state) {
        const infor=document.getElementsByClassName("infor")
        infor[0].value=this.props.location.state.goodsInfo.brand
        infor[1].value=this.props.location.state.goodsInfo.goodsName
        infor[2].value=this.props.location.state.goodsInfo.model
        infor[3].value=this.props.location.state.goodsInfo.category
        infor[4].value=this.props.location.state.goodsInfo.intoDatetime.replace(' ','T')
        infor[5].value=this.props.location.state.goodsInfo.quantity
        infor[6].value=this.props.location.state.goodsInfo.price
        this.setState({
          goodsInfos:true
        })
      
        }
        } 
      
// 获取输入数据
setValue = (e) =>{
  this.setState({
      [e.target.name]:e.target.value
  })
}
// 数据录入
submitSigUpInfo = (e) => {
    e.preventDefault();
    // 将表单数据转换为查询参数格式、
    const params = new URLSearchParams();
    // 商品品牌
    params.append("brand",this.state.brand);
    // 商品名称
    params.append("goodsName",this.state.goodsName);
    // 商品型号
    params.append("model",this.state.model);
    // 商品分类
    params.append("category",this.state.category);
    // 商品入库时间
    params.append("intoDatetime",this.state.intoDatetime);
    // 商品入库数量
    params.append("quantity",this.state.quantity);
    // 商品单价
    params.append("price",this.state.price);
    // 请求注册接口
    React.axios.post(`/store-manage/gw1901/goods-manage-g2/goods-add.php`,params).then(res=>{
      if(res.data.includes("商品添加成功！")){
        // 提示服务器返回信息
        alert(res.data)
        
      }
      // 提示服务器返回的错误
      else {
        alert(res.data)
      }
    })
  }
// 数据修改
submitSigOffInfo = () =>{
  const infor=document.getElementsByClassName("infor")
  
    // 将表单数据转换为查询参数格式、
    const params = new URLSearchParams();
    params.append("goodsID",this.props.location.state.goodsInfo.goodsID);
    // 商品品牌
    params.append("brand",infor[0].value);
    // 商品名称
    params.append("goodsName",infor[1].value);
    // 商品型号
    params.append("model",infor[2].value);
    // 商品分类
    params.append("category",infor[3].value);
    // 商品入库时间
    params.append("intoDatetime",infor[4].value);
    // 商品入库数量
    params.append("quantity",infor[5].value);
    // 商品单价
    params.append("price",infor[6].value);
    // 请求注册接口
    React.axios.post(`/store-manage/gw1901/goods-manage-g2/goods-update.php`,params).then(res=>{
      
        alert(res.data)
    })
}


    render() {
        return (
            // 商品录入与修改
            <div className="InfoEbtry">
                <h2><RocketIcon size={36}/>商品信息录入</h2>
                {/* 表单 */}
                <form>
                    <label>品牌：</label><input className="infor" onChange={this.setValue} name="brand" type="text" placeholder="请输入商品的品牌" /><br/>
                    <label>名称：</label><input className="infor"  onChange={this.setValue} name="goodsName" type="text" placeholder="请输入商品的名称" /><br/>
                    <label>型号：</label><input className="infor"  onChange={this.setValue} name="model" type="text" placeholder="请输入商品的型号" /><br/>
                    <label>分类:</label> <select className="infor"  onChange={this.setValue} name="category" id="">
                        <option value="--请选择--">--请选择--</option>
                        <option value="数码电器/办公用品">数码电器/办公用品</option>
                        <option value="食品饮料/厨房用品">食品饮料/厨房用品</option>
                        <option value="服装鞋包/化妆洗护">服装鞋包/化妆洗护</option>
                        <option value="家居家装/家用纺织">家居家装/家用纺织</option>
                        <option value="汽车配件/汽车用品">汽车配件/汽车用品</option>
                        <option value="运动户外/文娱艺术">运动户外/文娱艺术</option>
                        <option value="钟表珠宝/计生医疗">钟表珠宝/计生医疗</option>
                        <option value="其它分类">其它分类</option>
                        </select> <br/>
                    <label>入库时间:</label> <input className="infor"  onChange={this.setValue} name="intoDatetime" type="datetime-local"/> <br/>
                    <label>数量：</label><input className="infor"  onChange={this.setValue} name="quantity" type="text" placeholder="请输入商品入库的数量" /><br/>
                    <label>单价：</label><input className="infor"  onChange={this.setValue} name="price" type="text" placeholder="请输入商品的销售单价" /><br/>
                    <button type="reset" className="btn" >重置输入</button>
                    {
                      this.state.goodsInfos?
                      <button type="button" className="add" onClick={this.submitSigOffInfo}>确认修改</button>
                      : 
                      <button type="button" className="add" onClick={this.submitSigUpInfo}>确定录入</button>
                    }
                </form>
            </div>
        )
    }
}
